<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="./js/jquery.js"></script>
    <script src="./js/vanilla-tilt.js"></script>
    <script src="./js/main.js"></script>
</head>

<body style="overflow:hidde">
    <div class="page_1">
        <div class="page_1_main">
            <div class="title text-center">
                <h2>想和AI少女对话吗？</h2>
                <p id="page_1_p">那么点击下方奇怪的按钮吧！</p>
                <button id="page_1_down" class="page_1_btn page_btn-light" onclick="capture(this)">
                    <p>点击翻页</p>
                    <ion-icon class="down-outline" name="chevron-down-outline"></ion-icon>
                </button>
            </div>

        </div>
    </div>
    <div class="page_2">
        <div class="page_2_main">
            <div id="card" class="card_1">
                <div class="card_text">
                    <p>人工智障</p>
                </div>
            </div>
            <div id="card" class="card_2">
                <div class="card_text">
                    <p>随意涂鸦</p>
                </div>
            </div>
            <div class="page_2_btn">
                <button id="page_2_up" class="page_2_btn_1 page_btn-light" onclick="capture(this)">
                    <ion-icon class="down-outline" name="chevron-up-outline"></ion-icon>
                </button>
                <button id="page_2_down" class="page_2_btn_2 page_btn-light" onclick="capture(this)">
                    <ion-icon class="down-outline" name="chevron-down-outline"></ion-icon>
                </button>
            </div>
            <div id="card" class="card_3">
                <div class="card_text">
                    <p>社死日记</p>
                </div>
            </div>
            <div id="card" class="card_4">
                <div class="card_text">
                    <p>宝宝工具</p>
                </div>
            </div>
        </div>
    </div>
    <div class="page_3">
        <div class="page_3_bg">
            <button id="page_3_up" class="page_3_btn page_btn-light" onclick="capture(this)">
                <ion-icon class="down-outline" name="chevron-up-outline"></ion-icon>
            </button>
        </div>
    </div>
    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
<script>
    //禁止右键
    document.oncontextmenu = function () {
        event.returnValue = false;
    }
    var text = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"];
    var color = ['#ff0000', '#eb4310', '#f6941d', '#fbb417', '#ffff00', '#cdd541', '#99cc33', '#3f9337', '#219167', '#239676', '#24998d', '#1f9baa', '#0080ff', '#3366cc', '#333399', '#003366', '#800080', '#a1488e', '#c71585', '#bd2158', '#eec142', '#FEEE6D'];
    window.onload= function(){
        document.querySelector("body").onclick= function(){
            var e = event || window.event;
            var textNum = Math.floor(Math.random()*text.length);
            var colorNUm = Math.floor(Math.random()*color.length);
            var x= e.pageX;
            var y= e.pageY;
            var flag = document.createElement("span");
            flag.append(""+text[textNum]+"");
            flag.style.zIndex=999999;
            flag.style.fontWeight="bold";
            flag.style.position="absolute";
            flag.style.top=y-20+"px";
            flag.style.left=x -15 + "px";
            flag.style.color=color[colorNUm];
            document.querySelector("body").append(flag);
            var timer;
            var i=180,m=[10,9,8,7,6,5,4,3,2,1,0,-1,-2,-3,-4,-5,-6,-7,-8,-9,-10,-9,-8,-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7,8,9],n=0;
            cancelAnimationFrame(timer);
            timer =requestAnimationFrame(function fn(){
                if(i>0)
                {
                    i--;
                    flag.style.opacity=i/180;
                    flag.style.top=y-15-(180-i)+'px';
                    flag.style.left=x -15 +m[n]+ "px";
                    if(i%2==0)
                    n++;
                    timer=requestAnimationFrame(fn);
                    if(n>m.length)
                    {
                        n=0
                    }
                }
                else{
                    cancelAnimationFrame(timer);
                    flag.remove();
                }
            });
            

        }
    }
</script>

</html>